<!DOCTYPE HTML>
<html>
<head>
	<title>pixi.js example 3 using a movieclip</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000000;
		}
	</style>
	<script src="pixi.js"></script>
</head>
<body>
	<script>

	// create an array of assets to load
	var assetsToLoader = [ "SpriteSheet.json"];
	
	// create a new loader
	loader = new PIXI.AssetLoader(assetsToLoader);
	
	// use callback
	loader.onComplete = onAssetsLoaded
	
	//begin load
	loader.load();
	
	
	// holder to store aliens
	var explosions = [];
	
	var count = 0;
		
	// create an new instance of a pixi stage
	var stage = new PIXI.Stage(0xFFFFFF);;
	
	// create a renderer instance.
	renderer = PIXI.autoDetectRenderer(800, 600);
		
	// add the renderer view element to the DOM
	document.body.appendChild(renderer.view);
	
	function onAssetsLoaded()
	{
		// create an array to store the textures
		var explosionTextures = [];
		
		for (var i=0; i < 26; i++) 
		{
		 	var texture = PIXI.Texture.fromFrame("Explosion_Sequence_A " + (i+1) + ".png");
		 	explosionTextures.push(texture);
		};
		
		// create a texture from an image path
		// add a bunch of aliens
		for (var i = 0; i < 50; i++) 
		{
			// create an explosion MovieClip
			var explosion = new PIXI.MovieClip(explosionTextures);
			
		
			explosion.position.x = Math.random() * 800;
			explosion.position.y = Math.random() * 600;
			explosion.anchor.x = 0.5;
			explosion.anchor.y = 0.5;
			
			explosion.rotation = Math.random() * Math.PI;
			explosion.scale.x = explosion.scale.y = 0.75 + Math.random() * 0.5
			
			explosion.gotoAndPlay(Math.random() * 27);
			
			stage.addChild(explosion);
		}
		
		// start animating
		requestAnimFrame( animate );
		
		
	}	
	
	function animate() {
	
	    requestAnimFrame( animate );

	    renderer.render(stage);
	}

	</script>

	</body>
</html>
